Why

提升效能
隨著應用程式擴大，載入的時間也隨之增加，使用 Webpack 等 Bundler 做 Code Spliting 雖然不能減少應用程式的 Size，但可以幫助我們減少初始載入的負擔，延遲載入 User 所需的內容，提高應用程式的性能。

How

• import() Dynamic import

import("./math").then(math => {
  console.log(math.add(16, 26));
})

• React.lazy Render a dynamic import as a regular component

import React, { Suspense } from 'react'

const LazyComponent = React.lazy(() => import('./Component'))

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  )
}

參考資料

Code-Splitting
Code-Splitting